<template>
	<div>
		<div id="slider" class="mui-slider ">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a :class="['mui-control-item' ,item.id==0 ?'mui-active':''  ]" v-for="item in  phtot" :key="item.id" @tap="getphotobycateid(item.id)">
						{{item.title}}
					</a>

				</div>
			</div>

		</div>
		<ul class="phtotlist">
		
			<router-link  v-for="item in list":key="item.id" :to="'/index/photolist/photodetails/'+item.id" tag="li">
				<img v-lazy="item.img_url" alt="item.zhaiyao">
				<div class="info">
					<p class="info-title">{{item.title}}</p>
					<div class="info-content">{{item.zhaiyao}}</div>
				</div>
			</router-link >
		</ul>
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.js'

	export default {
		data() {
			return {
				phtot: [],
				list:[]
			}
		},
		created() {
			this.pushphtotlist();
			this.getphotobycateid(0)
		},
		mounted() {
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005
			});
		}, //dom结构渲染好并放到页面中后。
		methods: {
			pushphtotlist() {
				
				this.$http.get("api/getimgcategory").then(data => {
					if(data.body.status === 0) {
						data.body.message.unshift({
							title: "全部",
							id: 0
						});
						this.phtot = data.body.message;
						
					}
				})
			},
			getphotobycateid(cateId){
				this.$http.get("api/getimages/"+cateId).then(data => {
					
					if(data.body.status === 0) {	
						this.list = data.body.message;
						
					}
				})
			}
	
		
		}
	}
</script>

<style scoped="scoped" lang="less">
.phtotlist{
	margin: 0;
	padding: 10px;
	margin-bottom: 0px;
	margin-bottom: -20px;
	li{
		box-shadow: 2px 2px  6px #B6B6B6;
		text-align: center;
		vertical-align: middle;
		list-style: none;
		margin-bottom: 10px;
		padding: 0px;
		background-color: rgba(0,0,0,1);
		position: relative;
		img{
			width: 100%;
			vertical-align: middle;
		}
		text-align: center;
		
	
	}
	
}
.phtotlist:nth-last-child{
	margin-bottom: 0px;
}
.info{
	position: absolute;
	bottom: 0;
	color: #fff;
	text-align: left;
		background-color: rgba(0,0,0,0.2);
		max-height: 95px;
	.info-title{
		font-size: 14px;
		color: #fff;
		/*letter-spacing: 1px;*/
	}
	.info-content{
		font-size: 14px;
			/*letter-spacing: 21x;*/
	}
}
	
</style>